<template>
	<view class="page-bg">
		<!-- <img class="img-info" :src="picServiceUrl+orderInfo.showImage" v-if="orderInfo.showImage" /> -->
		<view class="order-items">
			<view class="head">
				<view class="title" v-if="item.sourceOfflineBusinessType==2">
					<view class="bus-name" v-if="item.remark.name">{{item.remark.name}}</view>
					<view class="bus-name" v-else>{{item.businessName}}-{{item.itemList[0].category.title}}</view>
					<view class="city">{{item.remark.modeType}}</view>
				</view>
				<view class="title" v-else>
					<span class="number">{{item.showId}}</span>
					<span v-if="item.remark.number">桌号{{item.remark.number}}</span>
				</view>
				<view class="state">
					{{item.state==1?'已完成':item.state==3||item.state==6?'进行中':'已退款'}}
				</view>
			</view>

			<view class="center-msg" v-if="item.state!=3&&item.state!=6">
				<view v-if="item.state==5">
					<span v-if="item.refundCause">由于{{item.refundCause}},</span>订单金额将原路退回至您的支付账号中！
				</view>
				<view class="code-img" v-else-if="item.goodsNumber||item.goodsNumberImage.length">
					<view class="top-code">
						取餐码：{{item.goodsNumber?item.goodsNumber:""}}
					</view>
					<view>
						<image class="img" v-for="(pic,index) in item.goodsNumberImage" :key="index"
							@click="viewPic(picServiceUrl+pic)" :src="picServiceUrl+pic" mode="widthFix"></image>
					</view>
				</view>
				<view v-else>
					订单已完成
				</view>
			</view>

			<view class="center-msg" v-else>
				<view v-if="item.businessId==1||item.businessId==2">
					预计72小时内到账，请注意查收
				</view>
				<view v-else>
					正在加速为您处理订单...
				</view>
			</view>


			<view v-for="good,idkey in item.itemList" :key="idkey">
				<view class="row goods">
					<view>{{good.goodsName}}</view>
					<view>￥{{good.originalPrice/100}}</view>
				</view>
				<view class="row shuxing">
					<view>{{good.specificationName}}</view>
					<view style="color: #36b172;">X{{good.nums}}</view>
				</view>
			</view>
			<view class="row count">
				<view><span v-if="item.itemList">共{{item.itemList.length}}种</span></view>
				<view>合计￥{{item.originalPrice/100}}</view>
			</view>
			<view class="row price-df" v-if="item.discountPrice">
				（含再花卡代付￥{{item.discountPrice/100}})
			</view>
			<view class="other">下单时间：{{item.createTimeString_date}}</view>

			<view class="other-order" style="">订单编号：{{item.orderNumber}}<text class="link"
					@click.stop="copyInfo(item.orderNumber)">复制</text></view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				item: null,
				picServiceUrl: app.globalData.picServiceUrl,
				orderId: null,
			}
		},
		onLoad(e) {
			this.orderId = e.id;
			this.getOrder();
		},
		methods: {
			copyInfo(info) {
				uni.setClipboardData({
					data: info + '',
					success(res) {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			viewPic(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			getOrder() {
				uni.request({
					url: app.globalData.serviceUrl +
						'/UserMiniProgramController/getUserOfflineBusinessOrderDetail',
					method: 'POST',
					data: {
						key: uni.getStorageSync('userKey'),
						order_id: this.orderId
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.state == 1) {
							let _res = res.data.data;
							if (_res.goodsNumberImage) {
								let arr = _res.goodsNumberImage.split(",");
								_res.goodsNumberImage = arr;
							}
							if (_res.remark) {
								try {
									_res.remark = JSON.parse(_res.remark);
								} catch (err) {
									_res.remark = _res.remark
								}
							}
							_res.showId = "00" + _res.id;
							let len = _res.showId.length;
							_res.showId = _res.showId.substring(len - 4, len)
							this.item = _res;
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.notice
							})
						}

					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-bg {
		background: rgba(242, 243, 248, 1);
		min-height: 100vh;
		padding-top: 10px;
		box-sizing: border-box;
	}

	.img-info {
		width: 100%;
	}

	.order-items {
		margin: 10px;
		padding: 15px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 5px;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f6f6f6;
			border-radius: 5px;

			.title {
				padding: 10px;
				font-size: 20px;

				.number {
					font-size: 42px;
					margin-right: 10px;
				}

				.city {
					font-size: 18px;
				}

				.bus-name {
					font-size: 18px;
				}
			}

			.state {
				line-height: 75px;
				width: 75px;
				border-left: 1px solid #e2e2e2;
				text-align: center;
				// color: #266fe2;
			}
		}

		.center-msg {
			background: #f1fcf6;
			color: #36b172;
			padding: 15px;
			margin: 20px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.link {
				text-decoration: underline;
				color: #266fe2;
			}

			.code-img {
				width: 100%;

				.top-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.right {
						font-size: 16px;
						color: #266fe2;
					}
				}

				.img {
					margin-top: 20px;
					width: 100%;
					background: #EEE;
				}
			}
		}


		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 5px 0;
		}

		.count {
			margin-top: 20px;
		}

		.price-df {
			font-size: 14px;
			padding-bottom: 20px;
			border-bottom: 1px solid #e3e3e3;
			justify-content: flex-end;
		}


		.shuxing {
			color: #666;
		}

		.other {
			font-size: 14px;
			color: #666;
		}

		.other-order {
			font-size: 14px;
			color: #666;
			margin-top: 10px;

			.link {
				margin-left: 15px;
				text-decoration: underline;
				color: #266fe2;
			}
		}
	}
</style>
